const { default: styled } = require("styled-components");

const ScrollView = styled.div`
  position: relative;
  margin-left: 2px;
  width: 1016px;
  .body {
    overflow: hidden;
    .main{
        transition: all 0.3s;
        transform: translateX(${props=>props.transX}px);
        display: flex;
    }
  }
  .lbtn {
      position: absolute;
      top: 50%;
      z-index: 10;
      left: -7px;
      transform: translateY(-50%);
      padding: 5px;
      border: 1px solid rgba(0,0,0,0.1);
      margin-top: -5px;
      border-radius: 30px;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: rgb(255, 255, 255);
        background-color: rgba(0,0,0,0.3);
        padding: 7px;
      }
    }
    .rbtn {
      position: absolute;
      top: 50%;
      z-index: 10;
      right: -7px;
      transform: translateY(-50%);
      padding: 5px;
      margin-top: -5px;
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 30px;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: rgb(255, 255, 255);
        background-color: rgba(0,0,0,0.3);
        padding: 7px;
      }
    }
`;
export default ScrollView;
